<!-- Sidebar.vue -->
<template>
  <div class="route-plan">
    <div class="car-attrs">
      <!-- 车辆类型选择 -->
      <div class="car-attrs-row">
        <div class="row-title">车辆类型：</div>
        <select
            class="my-select-input-style select-type"
            v-model="selectedCarType"
            @change="handleCarTypeChange"
        >
          <option
              v-for="car in carAttrList"
              :key="car.id"
              :value="car.id"
          >
            {{ car.name }}
          </option>
        </select>
      </div>

      <!-- 车辆属性标签 - 修改为纵向排列 -->
      <div class="car-attrs-row">
        <div class="row-title">车辆属性：</div>
        <div class="row-tags-vertical">
          <div
              class="tag-style-vertical"
              v-for="attr in currentCarAttrs"
              :key="attr"
          >
            {{ attr }}
          </div>
        </div>
      </div>

      <!-- 起点输入 -->
      <div class="car-attrs-row">
        <div class="row-title">起点：</div>
        <div class="poi-start">
          <input
              class="my-input-style start-point-latlng"
              id="start-point-latlng"
              v-model="startPoint"
              @blur="validateCoordinate('start')"
              placeholder="请输入起点"
              autocomplete="off"
          >
          <div class="fixed-position-icon fixed-start-icon" @click="selectPointOnMap('start')"></div>
          <div class="fixed-position-icon fixed-start-icon-config" style="display: none;"></div>
          <div class="error-tip start-error-tip" :style="{display: startError ? 'block' : 'none'}">请输入正确的经纬度!</div>
        </div>
      </div>

      <!-- 途径点输入 - 修改布局结构 -->
      <div class="car-attrs-row">
        <div class="row-title">途径点：</div>
        <div class="tjd-point-list">
          <div class="add-route-tjd" @click="addWayPoint"></div>
          <div class="poi-tjd" v-for="(wayPoint, index) in wayPoints" :key="index">
            <input
                class="way-point-latlng my-input-style tjd-point-latlng"
                v-model="wayPoints[index]"
                placeholder="请输入途经点"
                autocomplete="off"
            >
            <div class="fixed-position-icon fixed-way-icon fixed-tjd-icon" @click="selectPointOnMap('way', index)"></div>
            <div class="fixed-position-icon fixed-way-icon-config fixed-tjd-icon-config" style="display: none;"></div>
            <div class="delete-way-point delete-tjd-point" @click="removeWayPoint(index)"></div>
            <div class="error-tip way-error-tip" style="display: none;">请输入正确的经纬度!</div>
          </div>
        </div>
      </div>

      <!-- 终点输入 -->
      <div class="car-attrs-row">
        <div class="row-title">终点：</div>
        <div class="poi-end">
          <input
              class="my-input-style end-point-latlng"
              id="end-point-latlng"
              v-model="endPoint"
              @blur="validateCoordinate('end')"
              placeholder="请输入终点"
              autocomplete="off"
          >
          <div class="fixed-position-icon fixed-end-icon" @click="selectPointOnMap('end')"></div>
          <div class="fixed-position-icon fixed-end-icon-config" style="display: none;"></div>
          <div class="error-tip end-error-tip" :style="{display: endError ? 'block' : 'none'}">请输入正确的经纬度!</div>
        </div>
      </div>

      <!-- 禁行区输入 - 修改布局结构 -->
      <div class="car-attrs-row">
        <div class="row-title">禁行区：</div>
        <div class="jxq-point-list">
          <div class="add-route-jxq" @click="addNoEntryArea"></div>
          <div class="poi-jxq" v-for="(noEntryArea, index) in noEntryAreas" :key="index">
            <input
                class="way-point-latlng my-input-style jxq-point-latlng"
                v-model="noEntryAreas[index]"
                placeholder="添加禁行区"
                autocomplete="off"
                disabled
            >
            <div class="fixed-position-icon fixed-way-icon fixed-jxq-icon" @click="selectPointOnMap('noEntryArea', index)"></div>
            <div class="delete-way-point delete-jxq-point" @click="removeNoEntryArea(index)"></div>
          </div>
        </div>
      </div>

      <!-- 优先级选择 -->
      <div class="car-attrs-row">
        <div class="row-title">优先级：</div>
        <div class="row-content-yxj">
          <label class="radio-yxj">
            <input type="radio" name="radio-group" value="1" v-model="priority" class="radio-input">距离优先
          </label>
          <label class="radio-yxj">
            <input type="radio" name="radio-group" value="2" v-model="priority" class="radio-input">时间优先
          </label>
          <label class="radio-yxj">
            <input type="radio" name="radio-group" value="3" v-model="priority" class="radio-input">油耗优先
          </label>
        </div>
      </div>

      <!-- 约束条件选择 - 优化换行 -->
      <div class="car-attrs-row">
        <div class="row-title">约束条件：</div>
        <div class="row-content-ystj">
          <label class="radio-ystj">
            <input type="checkbox" name="checkbox-group" value="1" v-model="constraints" class="checkbox-input">水体约束
          </label>
          <label class="radio-ystj">
            <input type="checkbox" name="checkbox-group" value="2" v-model="constraints" class="checkbox-input">植被约束
          </label>
          <label class="radio-ystj">
            <input type="checkbox" name="checkbox-group" value="3" v-model="constraints" class="checkbox-input">建筑约束
          </label>
          <label class="radio-ystj">
            <input type="checkbox" name="checkbox-group" value="4" v-model="constraints" class="checkbox-input">地质约束
          </label>
          <label class="radio-ystj">
            <input type="checkbox" name="checkbox-group" value="5" v-model="constraints" class="checkbox-input">土壤约束
          </label>
          <label class="radio-ystj">
            <input type="checkbox" name="checkbox-group" value="6" v-model="constraints" class="checkbox-input">坡度约束
          </label>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="my-group-btns">
        <div class="my-group-btn plan-route-btn" @click="planRoute">规划路线</div>
        <div class="my-group-btn reset-btn" @click="resetForm">重置</div>
      </div>
    </div>
  </div>
</template>

<script>
import {carAttrList} from '@/utils/config';
export default {
  name: 'Sidebar',
  data() {
    return {
      carAttrList,
      selectedCarType: '1',
      currentCarAttrs: [],
      startPoint: '',
      endPoint: '',
      wayPoints: [''],
      noEntryAreas: [''],
      priority: '1',
      constraints: [],
      startError: false,
      endError: false
    };
  },
  created() {
    this.currentCarAttrs = carAttrList.find(car => car.id === '1').attrs;
  },
  methods: {
    // 车辆类型切换
    handleCarTypeChange() {
      const car = carAttrList.find(car => car.id === this.selectedCarType);
      this.currentCarAttrs = car?.attrs || [];
    },
    // 地图点选
    selectPointOnMap(type, index = null) {
      this.$emit('selectPointOnMap', {type, index});
    },
    // 设置坐标
    setCoordinate(type, index, coordinate) {
      switch (type) {
        case 'start':
          this.startPoint = coordinate;
          this.startError = false;
          break;
        case 'end':
          this.endPoint = coordinate;
          this.endError = false;
          break;
        case 'way':
          if (index !== null && index < this.wayPoints.length) {
            this.wayPoints[index] = coordinate;
          }
          break;
        case 'noEntryArea':
          if (index !== null && index < this.noEntryAreas.length) {
            this.noEntryAreas[index] = coordinate;
          }
          break;
      }
    },
    // 验证坐标
    validateCoordinate(type) {
      const value = type === 'start' ? this.startPoint : this.endPoint;
      let isValid = true;
      let errorMsg = '';
      if (!value) {
        isValid = false;
        errorMsg = '坐标不能为空';
      } else {
        const [lng, lat] = value.split(',').map(item => item.trim());
        if (!lng || !lat) {
          isValid = false;
          errorMsg = '格式不正确，请输入经度,纬度';
        } else if (isNaN(lng) || isNaN(lat)) {
          isValid = false;
          errorMsg = '坐标必须为数字';
        } else {
          const lngNum = parseFloat(lng);
          const latNum = parseFloat(lat);
          if (lngNum < -180 || lngNum > 180) {
            isValid = false;
            errorMsg = '经度应在-180到180之间';
          } else if (latNum < -90 || latNum > 90) {
            isValid = false;
            errorMsg = '纬度应在-90到90之间';
          }
        }
      }

      if (type === 'start') {
        this.startError = !isValid;
      } else {
        this.endError = !isValid;
      }

      if (!isValid) {
        console.error(`${type === 'start' ? '起点' : '终点'}${errorMsg}`);
      }
      return isValid;
    },
    // 添加途经点
    addWayPoint() {
      this.wayPoints.push('');
    },
    // 删除途经点
    removeWayPoint(index) {
      if (this.wayPoints.length > 1) {
        this.wayPoints.splice(index, 1);
      }
    },
    // 添加禁行区域
    addNoEntryArea() {
      this.noEntryAreas.push('');
    },
    // 删除禁行区域
    removeNoEntryArea(index) {
      if (this.noEntryAreas.length > 1) {
        this.noEntryAreas.splice(index, 1);
      }
    },
    // 路线规划
    planRoute() {
      if (!this.validateCoordinate('start') || !this.validateCoordinate('end')) {
        return;
      }
      const routeParams = {
        carType: this.selectedCarType,
        startPoint: this.startPoint,
        endPoint: this.endPoint,
        wayPoints: this.wayPoints.filter(point => point.trim() !== ''),
        priority: this.priority,
        constraints: this.constraints
      };

      this.$emit('planRoute', routeParams);
    },
    // 重置表单
    resetForm() {
      this.selectedCarType = '1';
      this.currentCarAttrs = carAttrList.find(car => car.id === '1').attrs;
      this.startPoint = '';
      this.endPoint = '';
      this.wayPoints = [''];
      this.noEntryAreas = [''];
      this.priority = '1';
      this.constraints = [];
      this.startError = false;
      this.endError = false;

      this.$emit('clearMap');
    }
  }
};
</script>

<style scoped>
/* 保持与原样式一致 */
.route-plan {
  position: absolute;
  width: 25%;
  height: 100%;
  background: linear-gradient(to left, rgba(9, 38, 54, 0.6), 98%, rgba(9, 38, 54, 0));
  right: 0;
  top: 0;
}

.car-attrs {
  margin-top: 90px;
  overflow-y: auto;
  width: 100%;
  height: calc(100% - 160px);
}

.car-attrs-row {
  display: flex;
  align-content: center;
  line-height: 50px;
  align-items: flex-start;
  position: relative;
  margin-bottom: 5px;
}

.row-title {
  width: 20%;
  text-align: right;
  color: white;
  padding-right: 10px;
}

/* 车辆类型选择器 */
.my-select-input-style.select-type {
  background: rgba(9, 38, 54, 0.7);
  height: 36px;
  line-height: 36px;
  margin-top: 7px;
  outline: none;
  border-radius: 3px;
  padding: 0 15px 0 5px;
  width: calc(80% - 80px);
  color: #fff;
  border: 1px solid #7c7c7c;
}

.row-tags-vertical {
  width: calc(80% - 40px);
  display: flex;
  flex-direction: row; /* 修改为行排列 */
  flex-wrap: wrap;     /* 允许换行 */
  gap: 10px;            /* 设置标签之间的间隔 */
}

.tag-style-vertical {
  padding: 5px 8px;
  border: 1px solid #9ad1ff;
  background: rgba(9, 38, 54, 0.7);
  line-height: normal;
  border-radius: 4px;
  margin-bottom: 5px;
  margin-top: 10px;
  color: white;
  font-size: 13px;
  cursor: default;
}

/* 输入框样式 */
.my-input-style {
  background: rgba(9, 38, 54, 0.7);
  height: 24px;
  line-height: 36px;
  border-radius: 3px;
  border: 1px solid #7c7c7c;
  margin-top: 7px;
  padding: 5px 5px 5px 25px;
  width: 260px;
  color: #fff;
}

.my-input-style::placeholder {
  color: #b9b9b9;
}

/* 起终点点标记样式 */
.poi-start::before, .poi-end::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  left: 114px;
  top: 21px;
  transform: translateY(-50%);
  margin-top: 7px;
}

.poi-start::before {
  background: #17e502;
}

.poi-end::before {
  background: red;
}

/* 途径点和禁行区点标记样式 */
.poi-tjd::before, .poi-jxq::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  left: 10px;
  top: 21px;
  transform: translateY(-50%);
  margin-top: 7px;
}

.poi-tjd::before {
  background: #faba0a;
}

.poi-jxq::before {
  background: #ff7300;
}

/* 图标定位 */
.fixed-position-icon {
  background: url(../../public/img/map/dw.png) no-repeat 50%;
  background-size: contain;
  position: relative;
  left: 267px;
  top: -29px;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  cursor: pointer;
  margin-top: 7px;
}

/* 添加/删除按钮 */
.add-route-tjd, .add-route-jxq {
  position: absolute;
  right: -10px;
  top: 19px;
  width: 20px;
  height: 20px;
  background: url('../../public/img/add.png') no-repeat 50% 50%;
  background-size: 100% 100%;
  cursor: pointer;
}

.delete-way-point {
  position: absolute;
  right: 15px;
  top: 22px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url('../../public/img/delete.png') no-repeat 50% 50%;
  background-size: 100% 100%;
  cursor: pointer;
  margin-top: 7px;
}

/* 单选和复选框样式 */
.row-content-yxj {
  width: calc(80% - 40px);
  display: flex;
  align-items: center;
}

.row-content-yxj .radio-yxj {
  margin-right: 20px;
  display: flex;
  align-items: center;
  color: white;
}

.row-content-ystj {
  width: calc(80% - 40px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.row-content-ystj .radio-ystj {
  width: 33%; /* 每行显示3个 */
  margin-right: 0;
  display: flex;
  align-items: center;
  color: white;
  margin-bottom: 5px;
}

.radio-input, .checkbox-input {
  margin-right: 5px;
}

/* 按钮样式 */
.my-group-btns {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.my-group-btn {
  width: 100px;
  height: 40px;
  line-height: 40px;
  background: #008cff;
  text-align: center;
  margin-right: 20px;
  border-radius: 4px;
  cursor: pointer;
  color: white;
}

.my-group-btn:last-child {
  margin-right: 0;
}

/* 错误提示样式 */
.error-tip {
  position: absolute;
  bottom: -27px;
  color: red;
  font-size: 12px;
  font-weight: bold;
  left: 20%;
  padding-left: 10px;
}

/* 途径点和禁行区容器 */
.tjd-point-list, .jxq-point-list {
  position: relative;
  width: calc(80% - 40px);
  margin-bottom: -10px;
}

.poi-tjd, .poi-jxq {
  position: relative;
  margin-bottom: 10px;
}
</style>